<template>
	<view @click.stop.prevent="close_discuss">
		<!-- chg_theme_bg -->
		<view class="banner" @click="clk(0)">
			<view style="max-height: 500upx;overflow: hidden;">
				<image :src="friend_bg_img" style="width: 100%;" mode="widthFix"></image>
			</view>
			<view class="camera">
				<image src="../../static/xj.png"  @click.stop.prevent="toggleMask1('show')" mode=""></image>
			</view>
			<view class="info">
				<view class="name">
					{{real_name}}
				</view>
				<view class="avatar">
					<image :src="real_head_img" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<avatar @upload="doUpload" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
		<view class="msg" v-for="(item, index) in res" :key="index" v-if="res.length!=0">
			<view class="info1">
				<view class="avatar1">
					<image :src="item.real_head_img" mode=""></image>
				</view>
				<view class="name1">
					{{item.real_name}}
				</view>
			</view>
			<view class="pyqxq">
				<view class="char">
					{{item.content}}
				</view>
				<!-- 视频渲染 -->
				<view class="video" v-if="item.type == 'video'">
						<video :src="item.images[0]" :muted="muted"	initial-time='1'	loop	controls></video>
				</view>
				<!-- 图片渲染 -->
				<view class="picture" v-if="item.type == 'image'">
					<view class="picture1" v-if="item.images.length==1">
						<image :src="item.images[0]" mode="aspectFill" @click="getPhotoClick_(item.images)"></image>
					</view>
					<view class="picture4" v-if="item.images.length==2 || item.images.length==4" >
						<view v-for="(image, index) in item.images" :key="index" :data-index="index" :data-imgs="item.images" @click="getPhotoClickIdx" style="display: inline-block;overflow: hidden;">
							<image :src="image" mode="aspectFill"></image>
						</view>
					</view>
					<view class="picture3" 
						v-if="item.images.length==3 || item.images.length==5 || item.images.length==6 || item.images.length==7 || item.images.length==8 || item.images.length==9"  >
						<view v-for="(image, index) in item.images" :key="index" :data-index="index" :data-imgs="item.images" @click="getPhotoClickIdx" style="display: inline-block;overflow: hidden;">
							<image :src="image" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<view class="time">
					{{item.create_time}}
				</view>
				<view class="discuss" v-if="item.discuss == true">
					<view class="zan">
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan2.png" mode="" v-if="item.is_like == 1" @click.stop="yes_no(item)"></image>
						<image style="width: 35upx;height: 35upx;" src="../../static/dianzan1.png" mode="" v-if="item.is_like == 2" @click.stop="yes_no(item)"></image>
						<view class="zan_t" @click.stop="yes_no(item)">
							赞
						</view>
					</view>
					<view class="pl" @click="toggleMask('show',item.id,item)">
						<image src="../../static/pl1.png" mode=""></image>
						<view class="pl_t">
							评论
						</view>
					</view>
				</view>
				<view class="comment" @click.stop.prevent="discussClick(item)">
					<image src="../../static/pl2.png" mode=""></image>
				</view>
			</view>
			<view class="zan_list" v-if="item.likeUser">
				<view class="zan_img">
					<image src="../../static/zan1.png" mode=""></image>
				</view>
				<view class="zan_name">
					{{item.likeUser}}
				</view>
			</view>
			<view class="pl_list_box">
				<view v-for="(list, index1) in item.commentList.list" :key="index1">
					<view class="pl_list" @click="del_comment(item.commentList.list,list,index1)">
						<text class="pl_name">
							{{list.real_name}} : 
						</text>
						<text class="pl_text">
							{{list.content}}
						</text>
					</view>
				</view>
				<view class="pl_list_add" v-if="item.commentList.page==true">
					<text class="right_gray" @click="getmore_commentlist(item)" >查看更多>></text>
				</view>
			</view>
		</view>
		
		<!-- 评论窗口 -->
		<view class="mask1" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content1" @click.stop.prevent="stop_prevent">
				<view style="width: 100%;min-height: 200upx;background-color: #fff;margin-top: 10upx;padding-top: 20upx;" >
					<textarea v-model="content" placeholder="欢迎你的精彩评论" style="margin: 0 35upx;width: 680upx;" />
				</view>
				<view style="background-color: #FFFFFF;text-align: right;">
					<button type="primary" style="width: 200upx;display: inline-block;height: 70upx;line-height: 70upx;color: #fff;background-color: #000;margin: 0 30upx;" @click="add_comment">添加评论</button>
				</view>
			</view>
		</view>
		
		<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
			<view class="mask-content">
				<view style="width: 90%;margin: 0 auto;height: 120upx;line-height: 50upx;background-color: #f3f3f3;text-align: center;margin-top: 10upx;color: #000;font-size: 32upx;z-index: 999;" @click="chooseVideo()">
					<view>
						拍摄
					</view>
					<view style="color: #aaaaaa;font-size: 22upx;">
						照片或视频
					</view>
				</view>
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;text-align: center;margin-top: 10upx;color: #000;font-size: 32upx;z-index: 999;" @click="chooseImage()">
					从相册选择
				</view>
				<view style="width: 90%;margin: 0 auto;height: 80upx;line-height: 80upx;background-color: #f3f3f3;text-align: center;margin-top: 20upx;color: #000;font-size: 32upx;z-index: 999;">
					取消
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	export default {
		components: {
			avatar
		},
		data() {
			return {
				res:[],
				page: 1, // 朋友圈页加载
				commont_page: 1, // 评论页加载
				friend_bg_img:'',
				real_head_img: '',
				real_name:'',
				maskState: 0, // 评论面板
				paper_id: 0, // 被评论的文章id
				content:'', // 评论内容
				maskState1: 0, // 删除面板显示状态
				muted: false,
				path: '',
				avatar: [], // 相册选择的图片数组
				discuss : false,
				urls: [''], // 更换顶部背景图
			}
		},
		onPullDownRefresh() {
			let o = this
			o.page = 1
			setTimeout(function () {
				o.setAjax();
				uni.stopPullDownRefresh();
			}, 200);
		},
		onReachBottom() {
		 this.getmore_pyqlist()
		},
		onUnload: function () { // 页面返回或者销毁 执行的函数
			this.page = 1
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'real_head_img',
				success: (res) => {
					this.real_head_img = res.data
				},
			});
			uni.getStorage({
				key: 'real_name',
				success: (res) => {
					this.real_name = res.data
				},
			});
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../pages/login/login'
					});
				}
			});
		},
		methods: {
			setAjax () {
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/index',
					method: 'POST',
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.hideLoading()
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if(res.data.code == 998){
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
						this.friend_bg_img = res.data.data.friend_bg_img
						// for(var i=0; i<obj.length; i++) {
						// 	obj[i].image = 'https://cx.mingmeijt.com' + obj[i].image
						// }
					},
					fail: () => {},
					complete: () => {}
				});
				// 朋友圈列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/index?p=' + this.page,
					method: 'POST',
					data:{
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if (res.data.data.list.list) {
							this.res = res.data.data.list.list
							let tpcList = this.res
							for (var i=0; i<tpcList.length; i++) {
								for(var j=0; j<tpcList[i].images.length; j++) {
									tpcList[i].images[j] = 'https://cx.mingmeijt.com' + tpcList[i].images[j]
								}
								this.res = tpcList
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chg_theme_bg(){
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let file = res.tempFilePaths
						for(var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://cx.mingmeijt.com/Api/Upload/index',
								filePath: file[i],
								name: 'file',
								formData: {
									'session_id': uni.getStorageSync("sessionid")
								},
								success: (res) => {
									_this.friend_bg_img = 'https://cx.mingmeijt.com' + JSON.parse(res.data).data
									// 图片传给后台
									uni.request({
										url: 'https://cx.mingmeijt.com/Api/User/updateUserInfo',
										method: 'POST',
										data:{
											friend_bg_img: _this.friend_bg_img,
											user_id: _this.user_id,
											session_id: uni.getStorageSync("sessionid")
										},
										header:{'Content-Type':'application/x-www-form-urlencoded'},
										success: ress => {
											uni.showToast({
												title: res.data.msg,
												icon: 'none'
											})
											_this.setAjax()
										},
										fail: () => {},
										complete: () => {}
									});
									
								}
							});
						}
						setTimeout(()=>{
							// uni.setStorageSync('avatar_', JSON.stringify(images))
						},2000)
					}
				});
			},
			// 点赞评论框显示隐藏状态
			discussClick(item) {
				this.$set(item, 'discuss', !item.discuss)
				for (let i = 0; i < this.res.length; i++) {
					if (this.res[i].id != item.id) {
						this.$set(this.res[i], 'discuss', false)
					}
				}
			},
			close_discuss () {
				for (let i = 0; i < this.res.length; i++) {
					this.$set(this.res[i], 'discuss', false)
				}
			},
			chooseVideo() {
				var o = this
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					maxDuration: 15,
					camera: 'back',
					success: function (res) {
						var fil = res.tempFilePath
						console.log(res.tempFilePath)
						uni.uploadFile({
							url: 'https://cx.mingmeijt.com/Api/Upload/index',//服务器接口
							method: 'POST',//这句话好像可以不用
							filePath: fil,
							name: 'file',//服务器定义的Key值
							formData: {
								'user_id': o.user_id,
								'session_id': uni.getStorageSync("sessionid")
							},
							success: function(ress) {
								let images = []
								images = ['https://cx.mingmeijt.com' + JSON.parse(ress.data).data]
								setTimeout(()=>{
									uni.setStorageSync('mp4_video', JSON.stringify(images))
									uni.navigateTo({
										url: './upload'
									})
								},2000)
							},
							fail: function() {
								console.log('接口调用失败')
							}
						})
						
					}
				});
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
						let file = res.tempFilePaths
						let images = []
						for(var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'https://cx.mingmeijt.com/Api/Upload/index',
								filePath: file[i],
								name: 'file',
								formData: {
									'session_id': uni.getStorageSync("sessionid")
								},
								success: (res) => {
									// console.log(JSON.parse(res.data))
									if (images.length != 0) {
											images = images.concat('https://cx.mingmeijt.com' + JSON.parse(res.data).data)
									} else {
											images = ['https://cx.mingmeijt.com' + JSON.parse(res.data).data]
									}
								}
							});
						}
						setTimeout(()=>{
							uni.setStorageSync('avatar_', JSON.stringify(images))
							uni.navigateTo({
								url: './upload'
							})
						},2000)
					}
				});
				
			},
			// 评论面板
			toggleMask(type,id,item){
				// 修改发布者的id
				this.paper_id = id
				if (item) {
					item.discuss = false
				}
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			// 显示删除选择面板
			toggleMask1(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
			},
			getPhotoClick_(list) {
				let _this = this;
				uni.previewImage({
					current:0,    //  传 Number H5端出现不兼容 
					urls: list
				});
			},
			getPhotoClickIdx(e) {
				let _this = this;
				let idx = e.currentTarget.dataset.index;
		    let imgs = e.currentTarget.dataset.imgs.map((item, index) => {
					return  item;
				});
				_this.imgPreview(imgs, idx);
			},
			imgPreview (list, idx) {
				if(list && list.length > 0){        
					uni.previewImage({
						current:list[idx],    //  传 Number H5端出现不兼容 
						urls: list
					});
				}
			},
			yes_no(item) {
				// 1 非点赞状态
				if (item.is_like == 1) {
					this.like(item)
					return
				}
				if (item.is_like == 2) {
					this.nolike(item)
					return
				}
			},
			like(item) {
				var o = this
				// 设为点赞状态
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/clickLike',
					method: 'POST',
					data:{
						paper_id: item.id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						if(res.data.code == 200) {
							if (item.likeUser=="" || item.likeUser== undefined) {
								this.$set(item, 'likeUser', o.real_name)
							} else {
								this.$set(item, 'likeUser', item.likeUser + ',' + o.real_name)
							}
							this.$set(item, 'is_like', 2)
							
						}
						setTimeout(function() {
							o.$set(item, 'discuss', !item.discuss)
						}, 800);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			nolike(item) {
				var o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaper/cancelLike',
					method: 'POST',
					data:{
						paper_id: item.id,
						user_id: this.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						setTimeout(function() {
							o.$set(item, 'discuss', !item.discuss)
						}, 800);
						if(res.data.code == 200) {
							// 没有,号直接清空
							if (item.likeUser.indexOf(',')==-1 || item.likeUser.indexOf(',')== -1) {
								this.$set(item, 'likeUser', "")
							} else {
								// lastIndexOf
								this.$set(item, 'likeUser', item.likeUser.substring(0,item.likeUser.lastIndexOf(',')))
							}
							this.$set(item, 'is_like', 1)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 添加评论
			add_comment () {
				let o = this
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/addPaperComment',
					method: 'POST',
					data:{
						user_id: this.user_id,
						paper_id: this.paper_id,
						content: this.content,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						uni.showToast({
							title:res.data.msg,
							icon:"none"
						})
						if (res.data.code == 200) {
							setTimeout(function() {
								let list = o.res.filter(function(item,index,array){
									//元素值，元素的索引，原数组。
									return (item.id == o.paper_id);
								});
								// 本人信息
								let data = {
									article_id: o.paper_id, // 有问题的参数
									paper_id: o.paper_id,
									content: o.content,
									real_name: o.real_name,
									uid: o.user_id,
									id: res.data.data
								}
								let newlist = list[0].commentList.list.unshift(data)
								o.content = ''
								o.toggleMask()
							}, 1000);
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			del_comment (allCommonList,list,i) {
				console.log(allCommonList)
				var o = this
				uni.showModal({
				    title: '提示',
				    content: '是否删除?',
				    success: (res)=> {
				        if (res.confirm) {
										uni.request({
											url: 'https://cx.mingmeijt.com/Api/LabelPaperComment/deletePaperComment',
											method: 'POST',
											data:{
												user_id: o.user_id,
												paper_id: list.paper_id,
												id: list.id,
												session_id: uni.getStorageSync("sessionid")
											},
											header:{'Content-Type':'application/x-www-form-urlencoded'},
											success: ress => {
												if(ress.data.code == 999){
													uni.navigateTo({
														url:'/pages/999/999'
													})
												};
												uni.showToast({
													title:ress.data.msg,
													icon:"none"
												})
												if (ress.data.code == 200) {
													allCommonList.splice(i,1) // 移除数组选中项,splice修改数组
												}
											},
											fail: () => {},
											complete: () => {}
										});
										return
				        } else if (res.cancel) {
										return
				        }
				    }
				});
			},
			stop_prevent() {},
			getmore_commentlist(item) {
				let o = this
				var num = ++item.commentList.pageNumber
				this.$set(item.commentList, 'pageNumber', num) // 当前选中评论页 +1
				// this.commont_page++;//每触底一次 commont_page +1
				// uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/LabelPaperComment/index?p=' + item.commentList.pageNumber++,
					method: 'POST',
					data: {
						paper_id: item.id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list == '' || res.data.data.list == null) {
							return;
						}
						var tpcList = res.data.data.list
						item.commentList.list = item.commentList.list.concat(tpcList);//将数据拼接在一起
						// console.log(item.commentList.list)
						// uni.hideNavigationBarLoading();//关闭加载动画
					}
				});
			},
			// 朋友圈列表
			getmore_pyqlist() {
				let o = this
				this.page++;//每触底一次 page +1
				// uni.showNavigationBarLoading();//显示加载动画
				uni.request({
					url:'https://cx.mingmeijt.com/Api/LabelPaper/index?p=' + this.page,
					method: 'POST',
					data: {
						user_id: o.user_id,
						session_id: uni.getStorageSync("sessionid")
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: function(res) {
						if(res.data.code == 999){
							uni.navigateTo({
								url:'/pages/999/999'
							})
						};
						if (res.data.data.list.list == '' || res.data.data.list.list == null) {
							uni.showToast({
								title: '我也是有底线的哦~',
								icon: 'none'
							})
							return;
						}
						var tpcList = res.data.data.list.list
						if (res.data.data.list.list) {
							for (var i=0; i<tpcList.length; i++) {
								for(var j=0; j<tpcList[i].images.length; j++) {
									tpcList[i].images[j] = 'https://cx.mingmeijt.com' + tpcList[i].images[j]
								}
							}
						}
						o.res = o.res.concat(tpcList);//将数据拼接在一起
					}
				});
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '750upx', selHeight: '500upx', // 截屏区域大小
					expWidth: '1500upx', expHeight: '1000upx', // 修改上传后图片清晰度
					inner: index ? 'true' : 'false'
				});
			},
			// 裁剪之前
			doBefore() {
				return
			},
			doUpload(rsp) {
				var _this = this
				this.$set(this.urls, rsp.index, rsp.path)
				console.log(this.urls)
				uni.uploadFile({
					url: 'https://cx.mingmeijt.com/Api/Upload/index',
					filePath: this.urls[0],
					name: 'file',
					formData: {
						'user': 'test',
						'session_id': uni.getStorageSync("sessionid")
					},
					success: (res) => {
						_this.friend_bg_img = 'https://cx.mingmeijt.com' + JSON.parse(res.data).data
						// 图片传给后台
						uni.request({
							url: 'https://cx.mingmeijt.com/Api/User/updateUserInfo',
							method: 'POST',
							data:{
								friend_bg_img: _this.friend_bg_img,
								user_id: _this.user_id,
								session_id: uni.getStorageSync("sessionid")
							},
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							success: ress => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								})
								_this.setAjax()
							},
							fail: () => {
								o.page = 1
								_this.setAjax()
							},
							complete: () => {}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.get_more_pl {
		height: 60upx;
	}
	.mask1{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content1{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content1{
				transform: translateY(0);
			}
		}
	}
	
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
			border-radius: 16upx 16upx 0 0;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}
</style>
<style lang="scss">
	page {background-color: #fff;}
	.banner {
		width: 100%;
		height: 500upx;
		position: relative;
		image {width: 100%;height: 100%;}
		background-color: #555;
		.camera {position: absolute;top: 20upx;right: 20upx;width: 72upx;height: 65upx;}
		.info {position: absolute;bottom: -60upx;right: 0;display: flex;justify-content: space-between;padding: 30upx;}
		.name {color: #fff;line-height: 100upx;font-size: 38upx;margin-right: 30upx;}
		.avatar {
			width: 120upx;height: 120upx;border-radius: 15upx;overflow: hidden;
			image {width: 100%;}
		}
	}
	.msg {
		width: 100%;min-height: 180upx;border-bottom: 1upx solid #F1F1F3;padding: 0 0 25upx 0;
		.info1 {display: flex;padding: 20upx 30upx;}
		.name1 {color: #5E6790;margin-left: 20upx;font-weight: 550;}
		.avatar1 {
			width: 80upx;height: 80upx;border-radius: 10upx;overflow: hidden;
			image {width: 100%;height: 100%;}
		}
		.pyqxq {
			.char {word-break:break-all;}
			padding: 0upx 30upx 20upx 130upx;margin-top: -25px;
			.video {margin-top: 20upx;padding-right: 50upx;video {width: 80%;}}
			.picture {
				padding: 20upx 0upx 0upx 0upx;
				.picture1 {
					image {width: 70%;}
					}
				.picture3 {
					display: flex;flex-wrap: wrap;
					image {width: 150upx;height: 150upx;margin: 0upx 10upx 0px 0;}
					}
				.picture4 {
					display: flex;flex-wrap: wrap;padding: 0upx 200upx 0upx 0upx;
					image {width: 150upx;height: 150upx;margin: 10upx 10upx 0 0;}
					}
				}
			}
		.zan_list {
			background-color: #F7F7F7;border-radius: 10upx 10upx 0 0;height: 40upx;display: flex;width: 78%;
			margin-left: 17%;border-bottom: 1upx solid #F1F1F3;
			.zan_name {color: #5E6790;font-size: 22upx;font-weight: 550;line-height: 40upx;}
			.zan_img {
				width: 30upx;height: 30upx;margin: 0upx 10upx;
				image {width: 100%;height: 100%;}}
		}
		.pl_list_box {
			border-radius: 0 0 10upx 10upx;
		}
		.pl_list {
			background-color: #F7F7F7;width: 78%;margin-left: 17%;
			.pl_name {color: #5E6790;font-size: 26upx;font-weight: 550;line-height: 40upx;margin: 5upx 10upx;}
			.pl_text {font-size: 26upx;line-height: 40upx;padding-left: 8upx;}
		}
		.pl_list_add{ background-color: #F7F7F7;width: 78%;margin-left: 17%;position: relative;height: 50upx;
			.right_gray{ font-size: 26upx;color: #22A6F2;position: absolute;right: 10upx;top: 0upx;}
		 }
		.footer {
			padding: 0upx 30upx 0upx 130upx;display: flex;justify-content: space-between;height: 55upx;
			.time {color: #AEAEAE;font-size: 24upx;}
			.comment {
				width: 60upx;height: 50upx;border-radius: 10upx;overflow: hidden;
				image {width: 100%;height: 100%;}
			}
			.discuss {
				background-color: #8C8C8C;padding: 15upx 30upx;
				border-radius: 15upx;width: 250upx;
				margin-top: -10upx;margin-right: -10upx;
				display: flex;justify-content: space-around;
				.zan {
					color: #fff;display: flex;
					image {width: 40upx;height: 40upx;}
					.zan_t {line-height: 40upx;font-size: 22upx;margin-left: 10upx;}
				}
				.pl {
					display: flex;color: #fff;
					image {width: 40upx;height: 40upx;}
					.pl_t {line-height: 40upx;font-size: 22upx;margin-left: 10upx;}
				}
			}
		}
	}
</style>